<template>
    <view class="page">
        <comHead :datas="datasObj"> <template #headerContent> </template> </comHead>
        <view class="content_box pd-30">
            <view class="models">
                <!-- 中英文 -->
                <view class="input_box bd-r40 pd-20" v-if="info.key == 'names'">
                    <view class="ft-28 c-33 fw-800">请输入中英名称</view>
                    <view class="input_bg flex bd-r20 mt-20">
                        <input v-model="form.names" placeholder="请输入中英名称" style="font-size: 24rpx;"
                            placeholder-class="input-placeholder" maxlength="15" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear()">
                        </image>
                    </view>

                    <view class="ft-22 c-99 mt-10 text_right">{{ form.names?.length }}/{{ 15 }}</view>
                </view>
                <!-- 输入数字年 -->
                <view class="input_box bd-r40 pd-20" v-if="info.key == 'experience'">
                    <view class="ft-28 c-33 fw-800">输入数字年</view>
                    <view class="input_bg flex bd-r20 mt-20">
                        <text class="c-33 ft-24 fw-800 mr-12">年: </text>
                        <input v-model="form.experience" placeholder="例如 “ 8 ”" style="font-size: 24rpx;"
                            placeholder-class="input-placeholder" maxlength="2" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear()">
                        </image>
                    </view>

                    <view class="ft-22 c-99 mt-10 text_right">{{ form.experience?.length }}/{{ 2 }}</view>
                </view>
                <!-- 输入服务时间范围 -->
                <view class="input_box bd-r40 pd-20" v-if="info.key == 'service_time'">
                    <view class="ft-28 c-33 fw-800">输入服务时间范围</view>
                    <view class="input_bg flex bd-r20 mt-20">
                        <input v-model="form.service_time" placeholder="例如“ 每周1~6，9:00~22:00 ”"
                            style="font-size: 24rpx;" placeholder-class="input-placeholder" maxlength="15" />
                        <image class="icon_samll ml-4" src="https://cdn.oss.bon-top.cn/static_bc/images/close_black.png"
                            mode="aspectFit" @click="clear()">
                        </image>
                    </view>

                    <view class="ft-22 c-99 mt-10 text_right">{{ form.service_time?.length }}/{{ 15 }}</view>
                </view>
                <!-- 输入您要描述的内容 -->
                <view class="input_box bd-r40 pd-20" v-if="info.key == 'des'">
                    <view class="ft-28 c-33 fw-800">输入您要描述的内容</view>
                    <view class="input_bg flex bd-r20 mt-20">
                        <textarea class="textarea bd-r20 pd-10" v-model="form.des" placeholder="请输入"
                            placeholder-class="textarea-placeholder" maxlength="-1" @input="" />
                    </view>
                </view>

            </view>
            <view :style="{ height: (98 + 68) + 'rpx' }"></view>
            <view class="btn_box">
                <view class="box" style="height: 98rpx;">
                    <view class="btn add" @click="submit()">提交</view>
                </view>

            </view>
        </view>
    </view>
</template>
<script setup lang="js">
import comHead from '@/components/comHead.vue';
import { onLoad } from '@dcloudio/uni-app';
import { ref, reactive, getCurrentInstance } from 'vue';

const { proxy } = getCurrentInstance();

let datasObj = reactive({
    title: '',
    img: '',
    color: '#FFFFFF',
    direction: '',
    scrollTop: 0,
    noBack: false,
    height: 88
})
const info = ref({})
const form = ref({})
const submit = () => {
    const eventChannel = proxy.getOpenerEventChannel();
    eventChannel.emit('getInput', { ...info.value, [info.value.key]: form.value[info.value.key] });
    uni.navigateBack(-1)
}
const clear = () => {
    form.value[info.value.key] = ''
}
onLoad((option) => {
    const eventChannel = proxy.getOpenerEventChannel();
    // 接受父页面的数据
    eventChannel.on('editData', (data) => {
        datasObj.title = data.title
        info.value = data
        form.value[info.value.key] = data[data.key] ? data[data.key] : ''
        console.log('data', data)

    });
    console.log('form', form.value)
})
</script>
<style lang="scss">
.content_box {

    .models {}

    .btn_box {
        width: 100%;
        position: fixed;
        left: 0;
        bottom: 0;
        box-sizing: border-box;
        background-color: #F8F8F8;
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));

        .center {
            width: 100%;
            text-align: center;
        }

        .btn_left {
            width: 132rpx;
            height: 54rpx;
            background: #FFFFFF;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            line-height: 54rpx;
            text-align: center;
        }

        .btn {
            width: 192rpx;
            height: 78rpx;
            background: #F1F1F1;
            border-radius: 20rpx 20rpx 20rpx 20rpx;
            text-align: center;
            line-height: 78rpx;
            font-size: 28rpx;

        }

        .box {
            padding: 20rpx 30rpx 0;
            box-sizing: border-box;
            height: 98rpx;


            .add {
                width: 100%;
                color: #DBF046;
                background-color: #333333;
            }

        }
    }
}

.input_box {
    background-color: #F8F8F8;

    .input_bg {
        background-color: #fff;
        padding: 20rpx;

        input {
            flex: 1;
            margin-right: 20rpx;
        }
    }
}

.btn {
    width: 100%;
    height: 78rpx;
    text-align: center;
    line-height: 78rpx;
    color: #DBF046;
    background-color: #333;
    margin-bottom: 20rpx;
}

:deep(.textarea) {
    height: 400rpx;
    background-color: #fff;
    width: 100%;
    // padding: 20rpx;
    font-size: 24rpx;
    color: #666;
    box-sizing: border-box;

}
</style>